<ion-header>
  <ion-navbar color="danger">
    <ion-buttons start>
      <button ion-button clear>
        <ion-icon name="qr-scanner"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>TMALL</ion-title>
    <ion-buttons end>
      <button ion-button clear>
        <ion-icon name="chatbubbles"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-searchbar background="danger"></ion-searchbar>
  <ion-grid>
      <ion-row>
        <ion-col>
          <div><button ion-button icon-left full color="danger" [outline] ="isOutline">
            <ion-icon name="card"></ion-icon>会员积分</button></div>
        </ion-col>
        <ion-col>
          <div><button ion-button icon-left full color="danger" [outline] ="isOutline">
            <ion-icon name="basket"></ion-icon>天猫超市</button></div>
        </ion-col>
        <ion-col>
          <div><button ion-button icon-left full color="danger" [outline] ="isOutline">
            <ion-icon name="globe"></ion-icon>天猫国际</button></div>
        </ion-col>
        <ion-col>
          <div><button ion-button icon-left full color="danger" [outline] ="isOutline">
            <ion-icon name="beer"></ion-icon>聚划算</button></div>
        </ion-col>
        <ion-col>
          <div><button ion-button icon-left full color="danger" [outline] ="isOutline">
            <ion-icon name="cube"></ion-icon>分类</button></div>
        </ion-col>
      </ion-row>
  </ion-grid>
  <div>
  <ion-slides autoplay="2000" loop="ture" (click)="goDetail()">
    <ion-slide>
      <!--<img src="assets/image/slide0.jpg" class="slide-image" (click)="openCommDetail()"/>-->
      <img src="assets/image/slide0.jpg" class="slide-image"/>
      <p>物品描述</p>
    </ion-slide>
    <ion-slide>
      <img src="assets/image/slide1.jpg" class="slide-image"/>
      <p>物品描述</p>
    </ion-slide>
    <ion-slide>
      <img src="assets/image/slide2.jpg" class="slide-image"/>
      <p>物品描述</p>
    </ion-slide>
  </ion-slides>
  </div>
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-card (click)="goDetail()">
          <img src="assets/image/slide0.jpg" class="img"/>
          <ion-card-content>
            <ion-card-title>物品描述</ion-card-title>
            <p>更多的物品描述在这</p>
            <ion-buttons end>
              <button ion-button icon-left small color="danger" [outline]="true">
                <ion-icon name="cart"></ion-icon>加入购物车</button>
              <button ion-button icon-left small color="danger" [outline]="true">
                <ion-icon name="cash"></ion-icon>立即购买</button>
            </ion-buttons>
          </ion-card-content>
        </ion-card>
      </ion-col>
      <ion-col>
        <ion-card (click)="goDetail()">
          <img src="assets/image/slide1.jpg" class="img"/>
          <ion-card-content>
            <ion-card-title>物品描述</ion-card-title>
            <p>更多的物品描述在这</p>
            <ion-buttons end>
              <button ion-button icon-left small color="danger" [outline]="true">
                <ion-icon name="cart"></ion-icon>加入购物车</button>
              <button ion-button icon-left small color="danger" [outline]="true">
                <ion-icon name="cash"></ion-icon>立即购买</button>
            </ion-buttons>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-card (click)="goDetail()">
          <img src="assets/image/slide1.jpg" class="img"/>
          <ion-card-content>
            <ion-card-title>物品描述</ion-card-title>
            <p>更多的物品描述在这</p>
            <ion-buttons end>
              <button ion-button icon-left small color="danger" [outline]="true">
                <ion-icon name="cart"></ion-icon>加入购物车</button>
              <button ion-button icon-left small color="danger" [outline]="true">
                <ion-icon name="cash"></ion-icon>立即购买</button>
            </ion-buttons>
          </ion-card-content>
        </ion-card>
      </ion-col>
      <ion-col>
        <ion-card (click)="goDetail()">
          <img src="assets/image/slide2.jpg" class="img"/>
          <ion-card-content>
            <ion-card-title>物品描述</ion-card-title>
            <p>更多的物品描述在这</p>
            <ion-buttons end>
              <button ion-button icon-left small color="danger" [outline]="true">
                <ion-icon name="cart"></ion-icon>加入购物车</button>
              <button ion-button icon-left small color="danger" [outline]="true">
                <ion-icon name="cash"></ion-icon>立即购买</button>
            </ion-buttons>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-toolbar color="danger">
    <ion-title color="#FFFFFF">[ 理想生活上天猫 ]</ion-title>
  </ion-toolbar>
</ion-content>
